<template>
  <div id="introduction">
    <div class="top">
      <div class="top_left">
        <el-card class="majorInfo">
          <h2>专业简介</h2>
          <el-card>
            <h3>是什么</h3>
            <div>
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                {{ infoText.isWhat }}
              </p>
            </div>
          </el-card>
          <el-card>
            <h3>学什么</h3>
            <div>
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                {{ infoText.learnWhat }}
              </p>
            </div>
          </el-card>
          <el-card>
            <h3>干什么</h3>
            <div>
              <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                {{ infoText.doWhat }}
              </p>
            </div>
          </el-card>
        </el-card>
      </div>
      <div class="top_right">
        <el-card class="majorRecom">
          <h2>相关专业推荐</h2>
          <el-card>
            <div v-for="(item, index) in similarList" :key="index">
              {{ item.name }}
            </div>
          </el-card>
        </el-card>
      </div>
    </div>
    <div class="second">
      <el-card class="kaoyan">
        <h2>考研方向</h2>
        <el-card>
          <div>
            <p>
              {{ infoText.direction }}
            </p>
          </div>
        </el-card>
      </el-card>
    </div>
    <div class="third">
      <el-card class="course">
        <h2>开设课程</h2>
        <el-card>
          <div>
            <p>
              {{ infoText.course }}
            </p>
          </div>
        </el-card>
      </el-card>
    </div>
    <div class="last">
      <el-card class="employment">
        <h2>就业方向</h2>
        <el-card>
          <div>
            <p>
              {{ infoText.job }}
            </p>
          </div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      infoText: {
        isWhat: "",
        learnWhat: " ",
        doWhat: " ",
        direction: "",
        course: "",
        job: "",
      },
      similarList: [
        {
          name: "宗教学",
        },
        {
          name: "逻辑学",
        },
      ],
    };
  },
  created() {
    this.$axios.get("/major/" + this.$route.params.id).then((res) => {
      console.log(res);
      this.infoText = res.data;
    });
    this.$axios.get("/similarMajor/" + this.$route.params.id).then((res) => {
      console.log(res);
      this.similarList = res.data;
    });
  },
};
</script>

<style scoped>
h2 {
  font-size: 20px;
  font-weight: 700;
}

h3 {
  font-size: 18px;
  font-weight: bold;
}

#introduction {
  display: flex;
  flex-direction: column;
}

.second,
.third,
.last {
  margin-top: 1.6vh;
}

.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.top_left /deep/ .el-card:first-child {
  width: 68.9vw;
}

.majorInfo /deep/ .el-card {
  width: 65vw;
  margin-top: 1.7vh;
}

.majorInfo /deep/ .el-card div {
  margin-top: 1vh;
}

.top_right /deep/ .el-card:first-child {
  width: 20vw;
  margin-right: 1.7vw;
}

.majorRecom /deep/ .el-card {
  margin-top: 1.6vh;
}

.majorRecom /deep/ .el-card div {
  margin-bottom: 1.6vh;
}

.kaoyan /deep/ .el-card,
.course /deep/ .el-card,
.employment /deep/ .el-card {
  margin-top: 0.8vh;
}
</style>